<template>
	<div>
		<h2>
			{{ datas.text }}
		</h2>
		<el-tabs type="border-card" :stretch="true">
			<el-tab-pane label="内容">
				<div class="decorate-card">
					<div class="decorate-card">
						<el-form ref="form" :model="datas" label-width="100px">
							<div class="title">样式设置</div>
							<el-form-item label="选择样式">
								<el-radio-group v-model="datas.mode">
									<!-- works when <2.6.0, deprecated act as value when >=3.0.0 -->
									<el-radio-button :label="1">
										<template #default>
											<span class="icon decorate-iconfont icon-xiaotuhengxianghuadong"></span>
										</template>
									</el-radio-button>
									<el-radio-button :label="2">
										<template #default><span class="icon decorate-iconfont icon-datuhengxianghuadong"></span></template>
									</el-radio-button>
								</el-radio-group>
							</el-form-item>

							<el-form-item label="点样式">
								<el-radio-group v-model="datas.indicator">
									<!-- works when <2.6.0, deprecated act as value when >=3.0.0 -->
									<el-radio-button :label="1">
										<template #default>
											<span class="icon my-icon icon-huadongdaohang"></span>
										</template>
									</el-radio-button>
									<el-radio-button :label="2">
										<template #default><span class="icon my-icon icon-shuzi"></span></template>
									</el-radio-button>
								</el-radio-group>
							</el-form-item>

							<el-form-item label="自动播放">
								<el-switch v-model="datas.autoplay" inline-prompt active-text="是" inactive-text="否" />
							</el-form-item>

							<!--							<el-form-item label="是否轮播">-->
							<!--								<el-switch v-model="datas.autoplay" inline-prompt active-text="是" inactive-text="否" />-->
							<!--							</el-form-item>-->

							<!--							<el-form-item label="滑动时间秒">-->
							<!--								<el-input v-model="datas.duration" placeholder="输入" size="small" controls-position="right" />-->
							<!--							</el-form-item>-->

							<el-form-item label="时间间隔">
								<el-input v-model="datas.interval" placeholder="输入">
									<template #append>
										<div class="ml10 mr10">ms</div>
									</template>
								</el-input>
							</el-form-item>

							<el-form-item label="间距">
								<div class="flex">
									<el-slider class="ml20" v-model="datas.space" />
									<el-input class="ml20" v-model="datas.space">
										<template #append>
											<div class="ml10 mr10">px</div>
										</template>
									</el-input>
								</div>
							</el-form-item>

							<vuedraggable :list="datas.list" item-key="index" :forceFallback="true" :animation="200">
								<template #item="{ element, index }">
									<section class="imgList">
										<el-form-item label="选择类型">
											<el-radio-group v-model="element.type">
												<el-radio label="image"> 图片 </el-radio>
												<el-radio label="video"> 视频 </el-radio>
											</el-radio-group>
										</el-form-item>

										<el-form-item label="上传">
											<div class="sd-flex" v-if="element.type == 'image'">
												<div class="choice-image choice-image-delete" @click="choiceFileImage(index, 'src')">
													<el-image v-if="element.src != ''" :src="STATIC_URL + element.src" fit="cover" class="cover-image" />
													<el-icon v-else>
														<ele-Plus />
													</el-icon>
													<div class="delete-content" @click.stop="element.src = ''" v-if="element.src != ''">
														<SvgIcon name="ele-DeleteFilled"></SvgIcon>
													</div>
												</div>
											</div>

											<div class="sd-flex" v-else>
												<div class="choice-image choice-image-delete" @click="choiceFileImage(index, 'src')">
													<video :src="STATIC_URL + element.src" v-if="element.src != ''" style="width: 100%; height: 100%; object-fit: fill"></video>
													<el-icon v-else>
														<ele-Plus />
													</el-icon>
													<div class="delete-content" @click.stop="element.src = ''" v-if="element.src != ''">
														<SvgIcon name="ele-DeleteFilled"></SvgIcon>
													</div>
												</div>
											</div>
										</el-form-item>

										<el-form-item label="视频封面" v-if="element.type == 'video'">
											<div class="sd-flex">
												<div class="choice-image choice-image-delete" @click="choiceFileImage(index, 'poster')">
													<el-image v-if="element.poster != ''" :src="STATIC_URL + element.poster" fit="cover" />
													<el-icon v-else>
														<ele-Plus />
													</el-icon>
													<div class="delete-content" @click.stop="element.poster = ''" v-if="element.poster != ''">
														<SvgIcon name="ele-DeleteFilled"></SvgIcon>
													</div>
												</div>
											</div>
										</el-form-item>

										<el-form-item label="标题">
											<el-input v-model="element.title"> </el-input>
										</el-form-item>

										<el-form-item label="链接">
											<el-input v-model="element.url">
												<template #append>
													<el-button class="ml5 mr5" @click="openChoiceData(index)">选择</el-button>
												</template>
											</el-input>
										</el-form-item>
										<van-icon class="el-icon-circle-close" name="close" @click="deleteCarouse(index)" />
									</section>
								</template>
							</vuedraggable>
							<el-button @click="add"> 添加广告图片 </el-button>
						</el-form>
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane label="样式">
				<DataStyle :datas="datas.dataStyle"></DataStyle>
			</el-tab-pane>
			<el-tab-pane label="数据">
				<StyleComponentData :datas="datas"></StyleComponentData>
			</el-tab-pane>
		</el-tabs>
		<FileChoice ref="FileChoiceRef" @choiceFile="choiceFile"></FileChoice>
		<PageData ref="PageDataRef" @choice="choicePage"></PageData>
	</div>
</template>

<script setup lang="ts" name="carouselstyle">
import vuedraggable from 'vuedraggable'; //拖拽组件
import { defineAsyncComponent, ref } from 'vue';
import { STATIC_URL } from '/@/utils/config';
import { fileType } from '/@/utils/mediaFileTypeUtils';
const FileChoice = defineAsyncComponent(() => import('/@/views/file/choice/index.vue'));

const PageData = defineAsyncComponent(() => import('/@/views/shop/data/page/choice/index.vue'));

const PageDataRef = ref();

const emits = defineEmits(['refreshScroll']);
const props = defineProps({
	datas: {},
});

const FileChoiceRef = ref();

const add = () => {
	props.datas.list.push({
		title: '',
		type: 'image',
		src: '',
		poster: '',
		url: '',
	});
};
let choiceIndex = 0;
let choiceType = 'src';
const choiceFileImage = (index, type) => {
	choiceIndex = index;
	choiceType = type;
	FileChoiceRef.value.openFileChoiceDialog();
};

const deleteCarouse = (index) => {
	props.datas.list.splice(index.value, 1);
};
const choiceFile = (res: any[]) => {
	console.log('choiceFile: ', res[0]);
	if ('src' == choiceType) {
		props.datas.list[choiceIndex].src = res[0].visitRelativePath;
	} else {
		props.datas.list[choiceIndex].poster = res[0].visitRelativePath;
	}
	// if (index.value > -1) {
	// 	props.datas.list[index.value].img = res[0].visitRelativePath;
	// 	props.datas.list[index.value].type = fileType(res[0].visitRelativePath);
	// } else {
	// 	res.forEach((element) => {
	// 		props.datas.list.push({
	// 			img: element.visitRelativePath,
	// 			href: '',
	// 			type: '',
	// 		});
	// 	});
	// }

	emits('refreshScroll');
};

let choicePageIndex = 0;

const openChoiceData = (index) => {
	PageDataRef.value.openDialog();
	choicePageIndex = index;
};

const choicePage = (res) => {
	console.log('choice page res: ', res);
	props.datas.list[choicePageIndex].url = res.urlContent;
};
</script>

<style scoped lang="scss">
.el-tabs--border-card {
	:deep(.el-tabs__content) {
		padding: 0px !important;
	}
	border: 0px;

	:deep(.el-tabs__header) {
		background-color: #d9d9d9 !important;
	}
}

.imgList:hover {
	.el-icon-circle-close {
		display: block;
	}
}

.imgList {
	padding: 6px 12px;
	margin: 16px 7px;
	border-radius: 2px;
	background-color: #fff;
	box-shadow: 0 0 4px 0 rgba(10, 42, 97, 0.2);
	position: relative;

	/* 删除图标 */
	.el-icon-circle-close {
		position: absolute;
		right: -5px;
		top: -10px;
		cursor: pointer;
		font-size: 19px;
		display: none;
	}
}

:deep(.el-input-group__prepend) {
	padding: 0px !important;
}

:deep(.el-input-group__append) {
	padding: 0px !important;
}
</style>
